<template>
	<view class="content">
		<view class="header">
			<u-cell url="/pages/mine/updateInfo" :icon="userInfo.cover || `/static/images/me/default_avatar.png`" :border="false"
				:iconStyle="{width: '90rpx', height: '90rpx', marginRight: '0rpx', borderRadius: '50%'}">
				<text slot="title" class="title">{{userInfo.nickname ? userInfo.nickname : '未设置'}}</text>
				<text slot="label" class="label">{{userInfo.description ? userInfo.description : '他好像没有什么要说的'}}</text>
				<u-icon name="arrow-right" slot="value" color="#ffffff"></u-icon>
			</u-cell>
			
			<view class="menu">
				<view class="item" @click="navTo('/pages/account/index')">
					<image class="icon" src="../../static/images/me/icon-wallet.png"></image>
					<text class="label">我的钱包</text>
				</view>
				<view class="item" @click="navTo('/pages/manage/index')">
					<image class="icon" src="../../static/images/me/icon-manage.png"></image>
					<text class="label">我的管理</text>
				</view>
				<view class="item" @click="navTo('/pages/setting/index')">
					<image class="icon" src="../../static/images/me/icon-set.png"></image>
					<text class="label">设置</text>
				</view>
			</view>
		</view>
		<view class="collection">
			<collection :list="list" :total="total" />
			<u-loadmore v-if="list.length > 0" :status="status" />
		</view>
	</view>
</template>

<script>
	import {
		mapState,
		mapActions
	} from 'vuex'
	import collection from '../mine/components/collection'
	import {
		authMixin
	} from '@/common/mixin/mixin.js'
	export default {
		components: {
			collection
		},
		mixins: [authMixin],
		data() {
			return {
				userInfo: {},
				query: {
					page: 1,
					limit: 10
				},
				list: [],
				status: 'loadmore',
				total: 0
			}
		},
		onLoad() {
			this.getUserInfo().then(res => {
				this.userInfo = res.data
			})
			this.getList()
		},
		onReachBottom() {
			if (this.status == 'nomore') {
				return;
			}
			this.query.page = this.query.page + 1
			this.getList()
		},
		methods: {
			...mapActions('user', ['getUserInfo', 'getOwnCollectionList']),
			getList() {
				this.status = 'loading'
				this.getOwnCollectionList(this.query).then(res => {
					this.list = this.list.concat(res.rows)
					this.total = res.total
					if (this.query.page == res.pages) {
						this.status = 'nomore'
					} else {
						this.status = 'loadmore'
					}
				})
			}

		}
	}
</script>

<style lang="scss" scoped>
	.content {
		background-color: #241e40;
		height: 100%;
	}

	.content {
		display: flex;
		flex-direction: column;

		.collection {
			background-color: #0a0a22;
			height: 100%;
		}

		.header {
			width: 100%;
			height: 300rpx;
			// #ifdef APP-PLUS
			padding-top: 130rpx;
			// #endif

			.title {
				color: #ffffff;
				font-weight: bold;
			}

			.label {
				color: #ffffff;
				font-size: 25rpx;
				overflow: hidden;
				text-overflow: ellipsis;
				display: -webkit-box;
				-webkit-line-clamp: 2;
				-webkit-box-orient: vertical;
			}

			.menu {
				display: flex;
				justify-content: space-between;
				padding: 28rpx 0rpx;

				.item {
					text-align: center;
					display: flex;
					flex-direction: column;
					width: 33%;

					.icon {
						width: 60rpx;
						height: 60rpx;
						margin: 0 auto;
					}

					.label {
						padding-top: 10rpx;
						color: #cdcdcd;
					}
				}
			}
		}

	}
</style>
